<template>

    <button @click="changeNode">修改节点颜色事件</button>

    <h2>添加自定义形状</h2>
<h2>右键菜单</h2>
    <div id="chart-diagram" style="background-color: whitesmoke; width: 1000px; height: 1000px;">
    </div>


</template>

<script setup>
    import {onMounted} from 'vue';
    import go from "gojs";

    let myDiagram = null;


    const changeNode = () => {
        var data = myDiagram.model.findNodeDataForKey("Delta");
        // 这个方式可以更新
        if (data !== null) myDiagram.model.setDataProperty(data, "color", "red");
    }


const doSomething=(e, obj)=>{
    console.log("===",e)
    console.log(obj)
}

    const init = () => {

        const $ = go.GraphObject.make

        myDiagram = new go.Diagram("chart-diagram", {
            'grid.visible': true, // 显示网格
            'clickCreatingTool.archetypeNodeData': {category: 'Normal', text: '新节点', notice: ''}, // 双击新建节点(可以写入节点的默认信息)；；
            'toolManager.hoverDelay': 100, // tooltip提示显示延时
            'toolManager.toolTipDuration': 10000, // tooltip持续显示时间
            allowMove: true, // 允许拖动画板
            allowDragOut: true, // 允许拖拽节点
            allowDelete: true, // 允许删除节点
            allowCopy: true, // 允许复制节点
            allowClipboard: true, // 允许粘贴节点

        });


        let commandsAdornmentData =
          $("ContextMenu",
            $(go.Panel, "Vertical",
              $("Button",
                $(go.Shape,{
                  fill: '#1B1D20', stroke: "#3AF5FC",margin:0,maxSize: new go.Size(NaN, 20)
                },  { click:  doSomething}),

                $(go.TextBlock, "删除",{stroke: '#3AF5FC'})
              ),
              $("Button",
                $(go.Shape,{
                  fill: '#1B1D20', stroke: "#3AF5FC",margin:0,maxSize: new go.Size(NaN, 20)
                },  { click:  doSomething}),

                $(go.TextBlock, "详情",{stroke: '#3AF5FC'},  { click:  doSomething})
              )
            )
          );



       myDiagram.nodeTemplate =
       $(go.Node, "Auto",{contextMenu:commandsAdornmentData},
         $(go.Shape,
           { fill: "white", portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer" },
           new go.Binding("fill", "color")),
         $(go.TextBlock,
           { margin: 8 },
           new go.Binding("text"))
       );

    myDiagram.model = new go.GraphLinksModel(
      [
        { key: 1, text: "Alpha", color: "lightblue", name: "A", },
        { key: 2, text: "Beta", color: "orange", name: "E" },
        { key: 3, text: "Gamma", color: "lightgreen", name: "A" },
        { key: 4, text: "Delta", color: "pink", name: "E" }
      ]);










    };

    onMounted(() => {
        init();
    });


</script>

<style scoped>

</style>